<template>
	<div>
		<div class="addButton">
			<a-button type="primary" @click="showDrawer">
				添加分类
			</a-button>
		</div>
		<table class="table" cellspacing="0" cellpadding="0">
			<tbody>
				<tr>
					<th>图标</th>
					<th>分类名称</th>
					<th>网站关键字</th>
					<th>网站描述</th>
					<th>排序</th>
					<th>是否显示</th>
					<th>首页显示</th>
					<th>操作</th>
				</tr>
			</tbody>
			
			<tbody>
				<tr v-for="(item,index) in allResourcesData" :key="index">
					<td>
						<img v-if="item.icon" :src="item.icon" alt="无图" style="width:40px;height: 40px;" />
					</td>
					<td>
						<span v-if="item.subclass" style="display: flex;justify-content: left">
							<span style="width: 45%"></span>
							<span style="width: 55%;display: flex;justify-content: left">|__ {{item.title}}</span>
						</span>
						<span v-else style="display: inline-block">{{item.title}}</span>
					</td>
					<td>
						<span v-if="item.keywords" :title="item.keywords">……</span>
					</td>
					<td>
						<span v-if="item.description" :title="item.description">……</span>
					</td>
					<td>{{item.sort}}</td>
					<td>{{item.show == 1 ? '显示' : '不显示'}}</td>
					<td>{{item.home_show == 1 ? '显示' : '不显示'}}</td>
					<td>
						<a-button size="small" class="m-r-10" @click="changeDrawer(item)">
							修改
						</a-button>
						<a-button size="small" @click="changeDel(item.id)">
							删除
						</a-button>
					</td>
				</tr>
			</tbody>
		</table>
		<!-- 弹窗 -->
		<div>
			<a-drawer title="添加/修改分类" placement="right" width="620" :closable="false" :visible="visible" @close="onClose">
				<div>
					<a-form :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
						<a-form-item label="父级类别">
							<a-select v-model:value="showConent.pidText" @change="pidChange">
								<a-select-option value="0" :seeked="queryParams.pid==0?true:false">顶级</a-select-option>
								<a-select-option v-for="(item,index) in allResourcesData" :key="index" :value="item.id" :seeked="item.id==queryParams.pid?true:false">
									<span v-if="item.pid != 0">&nbsp;&nbsp;&nbsp;--</span>{{item.title}}
								</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item label="分类名称">
							<a-input v-model:value="queryParams.title"></a-input>
						</a-form-item>
						<a-form-item label="排序">
							<a-input v-model:value="queryParams.sort"></a-input>
						</a-form-item>
						<a-form-item label="是否显示">
							<a-select v-model:value="showConent.showText">
								<a-select-option value="1" :seeked="allResourcesData.show==1?true:false">显示</a-select-option>
								<a-select-option value="0" :seeked="allResourcesData.show==0?true:false">不显示</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item label="首页显示">
							<a-select v-model:value="showConent.homeShowText">
								<a-select-option value="1">显示</a-select-option>
								<a-select-option value="0">不显示</a-select-option>
							</a-select>
						</a-form-item>
						<a-form-item v-model:value="queryParams.icon" class="upImg" label="图标">
							<urlImages :imgUrls="imgUrl" @imageUrl="imageUrl"></urlImages>
						</a-form-item>
						<a-form-item label="关键词">
							<a-input v-model:value="queryParams.keywords" />
						</a-form-item>
						<a-form-item label="描述">
							<textarea v-model="queryParams.description" cols="41" rows="5"></textarea>
						</a-form-item>
						<a-form-item :wrapper-col="{ span: 12, offset: 5 }">
							<a-button type="primary" @click="submit">
								确定
							</a-button>
						</a-form-item>
					</a-form>
				</div>
			</a-drawer>
		</div>
	</div>
</template>

<script>
	import apiZiyuan from '../../api/resource.js'
	import apiArticle from '../../api/resource.js'
	import urlImages from '../../components/upImage.vue'
	import {
		Modal
	} from "ant-design-vue";
	export default {
		components: {
			urlImages
		},
		data() {
			return {
				// 图片
				imgUrl: [],
				// 所有数据
				allResourcesData: [],
				parentCategorys:[], // 父级类别
				// 弹窗
				visible: false,
			
				// v-model
				queryParams: {
					title: '',
					sort: '',
					show: '',
					home_show: '',
					icon: '',
					url: '',
					keywords: '',
					description: '',
					pid: '',
					id: '',
				},
				showConent: {
					showText: '',
					homeShowText: '',
					pidText: ''
				}
			}
		},
		mounted() {
			this.allResources();
		},
		methods: {
			// 获取数据
			allResources() {
				apiZiyuan.getZiyuanCategorys(true).then(res => {
					this.allResourcesData = res.result
					// 没有使用
					// let data = []
					// for (let key in this.allResourcesData) {
					// 	if (this.allResourcesData[key].pid == 0) {
					// 		data.push(this.allResourcesData[key])
					// 	}
					// }
					// this.parentCategorys = data
				})
			},
			// 弹窗
			showDrawer() {
				this.visible = true;
				this.showConent = {
					showText: '1',
					homeShowText: '1',
					pidText: '顶级'
				}
				this.queryParams = {
					title: '',
					sort: '0',
					show: '',
					home_show: '',
					icon: 'https://zjw.data.zijiao.cn/gouziyuan/pic/202210/RYUw0IsjKEWXd6xi_www.gouziyuan.cn_185914.png',
					url: '',
					keywords: '',
					description: '',
					pid: '',
					id: '',
					// 添加默认选中
				}
			},
			onClose() {
				this.visible = false;
			},
			// 添加图片
			imageUrl(e) {
				this.queryParams.icon = e.imUrl;
			},
			pidChange(e){ // 选择父级类别
				this.queryParams.pid = e
			},
			// 修改
			changeDrawer(item) {
				let copy = Object.assign({}, item)
				this.queryParams = copy;
				this.visible = true;
				// 是否显示
				let show = this.queryParams.show
				show = show == true ? '1' : '0';
				this.showConent.showText = show
				// 是否首页显示
				let showOne = this.queryParams.home_show
				showOne = showOne == true ? '1' : '0';
				this.showConent.homeShowText = showOne
				
				this.showConent.pidText = '顶级'
				for (let key in this.parentCategorys) {
					if (this.parentCategorys[key].id == this.queryParams.pid) {
						this.showConent.pidText = this.parentCategorys[key].title
					}
				}
			},
			// 删除
			changeDel(e) {
				let T = this
				Modal.confirm({
					title: () => '确定删除吗?',
					okText: '确认',
					cancelText: '取消',
					onOk() {
						apiArticle.resourceDell({
							category_id: e
						}).then((res) => {
							if (res.status === 1) {
								T.$message.success("删除成功");
								T.allResources();
							}
						})
					},
				});
			},
			// 弹窗确定
			submit() {
				this.queryParams.show = this.showConent.showText
				this.queryParams.home_show = this.showConent.homeShowText
				apiZiyuan.ziyuanCategoryList(this.queryParams).then((res) => {
					if (res.status === 1) {
						this.$message.success("操作成功");
						this.allResources();
						this.visible = false;
					}
				})
			}
		}
	}
</script>

<style scoped>
	.addButton {
		padding: 10px;
		display: flex;
		justify-content: right;
	}
</style>
